<template>
	<view class="container">
		<uni-forms ref="loginForm" :modelValue="formData" :rules="loginValid">
			<uni-forms-item label="手机号" name="mobile">
				<uni-easyinput v-model="formData.mobile" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item label="密码" name="password">
				<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
			</uni-forms-item>
		</uni-forms>
		<button class="login-btn" type="primary" @tap="login">立即登录</button>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import loginValid from '@/validate/login_valid.js'
	export default {
		data() {
			return {
				formData: {
					mobile: '',
					password: ''
				},
				loginValid
			};
		},
		onLoad() {

		},
		methods: {
			...mapActions(['user/userLogin']),
			login() {
				this.$refs.loginForm.validate().then(res => {
					console.log(res)
					// 验证通过
					uni.showLoading({
						title: '正在登录...'
					})
					this['user/userLogin']({
						...res
					}).then(res => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}).catch(err => {
						uni.showToast({
							title: '服务端出错',
							icon: 'none',
							position: 'bottom'
						})
					}).finally(() => {
						uni.hideLoading()
					})

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
	}
</style>
